<!DOCTYPE html>
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/common/head(${webInfo})"></head>

<body class="fixed-left">
<!-- Begin page -->
<div id="wrapper">
    <div th:replace="admin/common/top_bar(null)"></div>
    <div th:replace="admin/common/side_menu(null)"></div>
    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h4 class="pull-left page-title">用户权限</h4>
                        <ol class="breadcrumb pull-right">
                            <li><a href="#">认证管理</a></li>
                            <li class="active">用户权限</li>
                        </ol>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">用户列表</h3>
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12 col-xs-12" style="margin-bottom: 10px;">
                                        <button type="button" onclick="addUser()"
                                                class="btn btn-info btn-rounded btn-xs">
                                            <i class="ion-plus-circled">添加用户</i>
                                        </button>
                                    </div>
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <table class="table table-bordered">
                                            <thead>
                                            <tr>
                                                <th>用户名</th>
                                                <th>用户昵称</th>
                                                <th>头像</th>
                                                <th>用户类型</th>
                                                <th>性别</th>
                                                <th>邮箱地址</th>
                                                <th>加入位次</th>
                                                <th>是否管理员</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody id="roleList">
                                            <tr th:each="user: ${users}">
                                                <td th:text="${user.getUserName()}"></td>
                                                <td th:text="${user.getNickName()}"></td>
                                                <td>
                                                    <img th:src="${user.getAvatar()}" style="height: 30px;width: 30px;">
                                                </td>
                                                <td th:text="${user.getUserType()}"></td>
                                                <td th:text="${user.getGender()}"></td>
                                                <td th:text="${user.getEmail()}"></td>
                                                <td th:text="${user.getJoinCount()}"></td>
                                                <td th:text="${user.getIsAdmin()}"></td>
                                                <td>
                                                    <button onclick="modifyRole(1,this)"
                                                            class="btn btn-icon btn-xs btn-warning">
                                                        <i class="ion-edit"></i>
                                                        修改
                                                    </button>
                                                    <button th:data="${user.getId()}"
                                                            onclick="manageUserRole(this)"
                                                            class="btn btn-purple btn-xs">
                                                        <i class="ion-android-mixer"></i>
                                                        角色
                                                    </button>
                                                    <button onclick="deleteRole(1,this)"
                                                            class="btn btn-icon btn-xs btn-danger">
                                                        <i class="ion-close-circled"></i>
                                                        删除
                                                    </button>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer text-right">
            2022 © FileShare.
        </footer>
        <div class="modal fade" id="userRoleModal" style="height: auto">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">用户角色</h4>
                    </div>
                    <div class="modal-body" style="height: 200px;">
                        <label>用户角色：</label>
                        <input id="form-tags-4" name="tags-4" type="text" value="">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" onclick="saveUserRoles()" class="btn btn-primary">保存更改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:replace="admin/common/base_script"></script>
<script th:src="@{/plugins/request/axios.min.js}"></script>
<script th:src="@{/plugins/request/request.js}"></script>
<script th:src="@{/plugins/alert/nz-alert/NZ-MsgBox.min.js}"></script>
<script th:src="@{/plugins/alert/nz-alert/NZ-Drag.min.js}"></script>
<script th:src="@{/admin/plugins/jquery-ui/jquery-ui.min.js}"></script>
<script th:src="@{/admin/plugins/jquery-tagsinput/jquery-tagsinput.js}"></script>
<script th:src="@{/admin/js/auth.js}"></script>
<script type="text/javascript">
    let resizeFunc = [];
    $('#form-tags-4').tagsInput({
        'autocomplete': {
            server: {
                url: `/admin/api/auth/user/roles`,
                mapping: item => {
                    return item.roleName
                },
                root: "data",
                page: {
                    current: 1,
                    limit: 50
                }
            }
        },
        enableManual: false
    });
</script>
</body>
</html>